<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <!-- 使用Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">我的博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html"><i class="fas fa-home"></i> 主页</a>
        <a class="nav-span" href="blog_edit.html"><i class="fas fa-edit"></i> 写博客</a>
        <a class="nav-span" href="#" onclick="logout()"><i class="fas fa-sign-out-alt"></i> 注销</a>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/doge.jpg" alt="">
                <h3>用户名称</h3>
                <a href="#" target="_blank"><i class="fab fa-github"></i> GitHub 地址</a>
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value">2</div>
                        <div class="stat-label">文章</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">1</div>
                        <div class="stat-label">分类</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="page-header">
                <h2><i class="fas fa-newspaper"></i> 最新文章</h2>
                <div class="search-box">
                    <input type="text" id="search-input" placeholder="搜索文章...">
                    <button id="search-btn"><i class="fas fa-search"></i></button>
                </div>
            </div>
            <div class="blog-list">
                <!-- 博客列表将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(document).ready(function() {
            loadBlogs();

            // 搜索功能
            $("#search-btn").click(function() {
                searchBlogs();
            });
            
            $("#search-input").keypress(function(e) {
                if(e.which === 13) { // Enter键
                    searchBlogs();
                }
            });
            
            //获取登录用户的信息
            var url = "/user/getUserInfo?userId="+localStorage.getItem("loginUserId");
            getUserInfo(url);
        });
        
        function loadBlogs() {
            // 移除加载提示的代码，直接发送请求
            $.ajax({
                type: "get",
                url: "/blog/getList",
                success: function (result) {
                    if (result.code == 200 && result.data != null && result.data.length > 0) {
                        //循环拼接数据到document
                        var finalHtml = "";
                        for (var blog of result.data) {
                            finalHtml += '<div class="blog">';
                            finalHtml += '<div class="blog-header">';
                            finalHtml += '<div class="title">' + blog.title + '</div>';
                            finalHtml += '<div class="date"><i class="far fa-clock"></i> ' + blog.updateTime + '</div>';
                            finalHtml += '</div>';
                            finalHtml += '<div class="desc">' + blog.content + '</div>';
                            finalHtml += '<div class="blog-footer">';
                            finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文 <i class="fas fa-angle-double-right"></i></a>';
                            finalHtml += '</div>';
                            finalHtml += '</div>';
                        }
                        $(".blog-list").html(finalHtml);
                    } else {
                        $(".blog-list").html('<div class="no-blogs"><i class="fas fa-exclamation-circle"></i> 暂无文章</div>');
                    }
                },
                error: function(err) {
                    console.error("获取博客列表失败:", err);
                    $(".blog-list").html('<div class="error-message"><i class="fas fa-exclamation-triangle"></i> 加载文章失败，请刷新页面重试</div>');
                }
            });
        }
        
        function searchBlogs() {
            var keyword = $("#search-input").val().trim();
            if(keyword) {
                // 模拟搜索效果
                var found = 0;
                $(".blog").each(function() {
                    var title = $(this).find(".title").text().toLowerCase();
                    var content = $(this).find(".desc").text().toLowerCase();
                    if(title.includes(keyword.toLowerCase()) || content.includes(keyword.toLowerCase())) {
                        $(this).show();
                        found++;
                    } else {
                        $(this).hide();
                    }
                });
                
                // 如果没有找到匹配的文章，显示提示弹框并重新跳转到列表页
                if(found === 0) {
                    alert("没有找到相关文章");
                    window.location.href = "blog_list.html";
                }
            } else {
                $(".blog").show();
            }
        }
    </script>
</body>

</html>